<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>demo water-basic</title>
	<style type="text/css">
		.water-basic {
			position: relative;
		}
		.item {
			position: absolute;
			width: 200px;
			margin: 5px;
			transition: all 1s;
		}
		.box1 {
			height: 500px;
			background-color: red;
		}
		.box2 {
			height: 300px;
			background-color: blue;
		}
		.box3 {
			height: 200px;
			background-color: gray;
		}
		.box4 {
			height: 700px;
			background-color: pink;
		}
		.box5 {
			height: 600px;
			background-color: yellow;
		}
		.one{background-color: #FFC0CB !important;}
		
	</style>
	<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div data-class='one' class="water-basic">
	<div data-class='one' class="item box1">1</div>
	<div data-class='one' class="item box2">2</div>
	<div data-class='one' class="item box1">3</div>
	<div data-class='one' class="item box4">4</div>
	<div data-class='one' class="item box5">5</div>
	<div data-class='one' class="item box3">6</div>
	<div data-class='one'class="item box2">7</div>
	<div data-class='one'class="item box1">8</div>
	<div data-class='one'class="item box1">9</div>
	<div data-class='one'class="item box2">10</div>
	<div data-class='one'class="item box4">11</div>
	<div data-class='one'class="item box3">12</div>
	<div data-class='one'class="item box1">13</div>
	<div data-class='one'class="item box5">14</div>
	<div data-class='one'class="item box2">15</div>
	<div data-class='one'class="item box1">16</div>
	<div data-class='one'class="item box3">17</div>
	<div data-class='one'class="item box1">18</div>
	<div data-class='one'class="item box2">19</div>
	<div data-class='one'class="item box1">20</div>
	<div data-class='one'class="item box4">21</div>
	<div data-class='one'class="item box5">22</div>
	<div data-class='one'class="item box3">23</div>
	<div data-class='one'class="item box2">24</div>
	<div data-class='one'class="item box1">25</div>
	<div data-class='one'class="item box1">26</div>
	<div data-class='one'class="item box2">27</div>
	<div data-class='one'class="item box4">28</div>
	<div data-class='one'class="item box3">29</div>
	<div data-class='one'class="item box1">30</div>
	<div data-class='one'class="item box5">31</div>
	<div data-class='one'class="item box2">32</div>
	<div data-class='one'class="item box1">33</div>
	<div data-class='one'class="item box3">34</div>
</div>



<script type="text/javascript">
//	var offSetTop = $(window).offset().top;
//	console.log(offSetTop)
window.onload = function(){
	function load(){
		
	
	$('div').each(function(i,v){
		var that = $(this);
		var setop = that.offset().top;
		loadshow(setop,that)
	})
	}
	load()
	
	function loadshow(setop,that){
		var winH = $(window).height(),//可是区域的高度
			scrollTop = $(window).scrollTop()//滚动条的高度
			if(setop < winH + scrollTop){
				var one = that.attr('data-class')
				that.addClass('one')
			}
	}
	$(window).scroll(function() {
		load()
//	    var winH = $(window).height(),//可是区域的高度
//			scrollTop = $(window).scrollTop(),//滚动条的高度
//			offSetTop = $('div').offset().top;//元素距离顶部的距离
//			console.log(winH)
//			console.log(scrollTop)
//			console.log(offSetTop)
//			
//			if(offSetTop < winH + scrollTop){
//				var one = $('.item').attr('data-class')
//				$('.item').addClass('one')
//			}
//  
})
	
}
	var waterBasic = (function(){
		function init(){
			var nodeWidth = $(".item").outerWidth(true),//返回元素的宽度
				colNum = parseInt( $(window).width() / nodeWidth ),//浏览器宽度 / 元素宽度  
				colSumHeight = [];
			for (var i=0;i<colNum;i++) {
				colSumHeight.push(0);
			}
			$(".item").each(function(){
				var $cur = $(this),
					idx = 0,
					minSumHeight = colSumHeight[0];//数组个数
				// 获取到colSumHeight中的最小高度
				for (var i=0;i<colSumHeight.length;i++) {
					if (minSumHeight > colSumHeight[i]) {
						minSumHeight = colSumHeight[i];
						idx = i;
					}
				}
				// 设置各个item的css属性
				$cur.css({
					left: nodeWidth*idx,
					top: minSumHeight
				})
				// 更新solSumHeight
				colSumHeight[idx] = colSumHeight[idx] + $cur.outerHeight(true);
//				console.log(colSumHeight)
			})
		}
		// 设置窗口改变时也能重新加载
		$(window).on("resize", function(){
			init();
		})
		return {
			init: init
		}
	})();
	waterBasic.init();
</script>
</body>
</html>